@import "../../../../../assets/css/Master/index";

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-yinpin-zhuti {
    margin-left: -.2rem;
  }
  //.icon-yinpin {
  //  margin-left: .5rem;
  //}

  span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    //width: 4rem;
    i {
      font-size: 1.6rem;
      display: inline-flex;
      text-align: left;
    }
    .one {
      font-size: 12px;
      position: absolute;
      left: 1rem;
      top: 0.18rem;
      opacity: .5;
      transform: scale(.1) rotate(20deg);
      -webkit-transform: scale(.1) rotate(20deg);
      animation: spin 1000ms infinite linear;
      -webkit-animation: spin 1000ms infinite linear;
    }
    .tow {
      font-size: 12px;
      position: absolute;
      //transform: rotate(3deg);
      top: 0.18rem;
      left: 1.1rem;
      transform: scale(.1) rotate(20deg);
      -webkit-transform: scale(.1) rotate(20deg);
      animation: spins 1000ms infinite linear;
      -webkit-animation: spins 1000ms infinite linear;
      animation-delay: .6s;
      -webkit-animation-delay: .6s; /* Safari 和 Chrome */
    }
  }
  .icon{
    padding-right: .6rem;
  }
}

@keyframes spin {
  0% {
    left: 1rem;
    opacity: .5;
    transform: scale(.1);
  }
  40% {
    left: 1.2rem;
    opacity: 1;
    transform: scale(.8);
  }
  100% {
    left: 1.8rem;
    opacity: 0;
    transform: scale(1.2);
    //transform: rotate(360deg);
  }
}

@-webkit-keyframes spins {
  0% {
    left: 1.1rem;
    opacity: .5;
    transform: scale(.1);
  }
  40% {
    left: 1.2rem;
    opacity: 1;
    transform: scale(.8);
  }
  100% {
    left: 1.9rem;
    opacity: 0;
    transform: scale(1.3);
    //transform: rotate(360deg);
  }
}
